<template>
	<view>
		<view class="wrap u-rela">
			<u-swiper class="swiper_con" height='540rpx' :list="list" mode="number" borderRadius="0" indicatorPos="bottomRight"></u-swiper>
			<view @click="tosearch" class="search_top pos_center u-text-center">请输入需要搜索的内容</view>
		</view>
		<view class="u-padding-20">
			<view class="two_title u-flex u-flex-nowrap u-row-between">
				<view class="title_list u-text-center" @click="tomessageCenter">
					<image style="width:70rpx;height:85rpx;" class="dis_blo u-margin-bottom-20" src="https://admin.gslhzhwy.com/upload/9a/77b79e1b996f358182d7c164614eaa.png" mode="heightFix"></image>
					<text>通知公告</text>
				</view>
				<view class="title_list u-text-center" @click="topatrol">
					<image class="dis_blo u-margin-bottom-20" src="https://admin.gslhzhwy.com/upload/5c/72196bc1a3321879fb202918b16c4d.png" mode="heightFix"></image>
					<text>巡查管理</text>
				</view>
			</view>
			<view class="box_shadow u-margin-top-20">
				<view class="u-rela dan_title">
					<u-icon class="dis_inl_blo va_m u-margin-right-20" size="35" color="#fcbc1f" name="volume-fill"></u-icon>
					<text class="va_m">通知公告</text>
					<text class="u-abso pos_right u-font-14" style="color:#666;" @click="tomorenotice">查看更多 》</text>
				</view>
				<view class="u-rela u-border-bottom" style="padding:20rpx;padding-left:0;" v-for="(item, index) in messageList" :key="index" @click="messagedetail(item.id)" v-if="index<3">
					<view class="dis_inl_blo va_m" style="width:5rpx;height:40rpx;border-radius:3rpx;margin-right:20rpx;background-color: #0B868E;"></view>
					<view class="right_con dis_inl_blo va_m">
						<text style="float: right;" class="time">{{item.time}}</text>
						<text class="u-font-14">{{item.content}}</text>
						
						<view class="message_com dis_inl_blo">
							您有1条新的消息通知
						</view>
						
					</view>
					
				</view>
				<view class="u-rela dan_title u-border-top u-text-center" @click="tomorenotice">
					<image style="top:20rpx;" class="more u-abso pos_center" src="../../static/more.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="box_shadow u-margin-top-20" v-if="patrollist.length!=0">
				<view class="u-rela dan_title">
					<u-icon class="dis_inl_blo va_m u-margin-right-20" size="35" color="#00aa00" name="eye-fill"></u-icon>
					<text class="va_m">巡查管理</text>
					<text class="u-abso pos_right u-font-14" style="color:#666;" @click="tomorepatrol">查看更多 》</text>
					<!-- <text class="u-abso pos_right">共 <text style="color:red;">{{len}}</text> 条</text> -->
				</view>
				<view class="uni-flex-center" v-for="(item, index) in patrollist" :key="index" v-if="index<5" @click="patrolDetail(item.code)">
					<view class="main-service uni-cell-90">
						<view class="user-list">
							<view class="title u-rela">
								<view class="u-abso pos_left">
									<view v-if="item.complete==1 && item.status==1"><text class="dis_inl_blo circle"></text>设备情况：<text style="color:#18B566;">正常</text></view>
									<view v-else-if="item.complete==1 && item.status==-1"><text class="dis_inl_blo circle circle1"></text>设备情况：<text style="color:#ff0000;">异常</text></view>
									<view v-else ><text class="dis_inl_blo circle circle2"></text>设备情况：<text style="color:#ff5500;">待巡查</text></view>
								</view>
								<view class="u-abso pos_right">
									<text v-if="item.complete==1" style="color:#0B868E;">已巡更</text>
									<u-icon v-else size="60" color="#0B868E" name="scan" @tap.stop @click.stop="scanCode"></u-icon>
									<!-- <text v-else style="color:#0B868E;">未巡更</text> -->
								</view>
							</view>
							<!-- <u-line></u-line> -->
							<view class="u-padding-20">
								<view class="d_view u-margin-bottom-20">
									<text class="l_title">设备名称</text>
									<text class="d_content">{{item.name}}</text>
								</view>
								<view v-if="item.address" class="d_view u-margin-bottom-20">
									<text class="l_title">设备位置</text>
									<text class="d_content">{{item.address}}</text>
								</view>
								
								<view class="d_view u-margin-bottom-20">
									<text class="l_title">设备巡期</text>
									<text class="d_content" v-if="item.type==0">日巡</text>
									<text class="d_content" v-if="item.type==1">周巡</text>
									<text class="d_content" v-if="item.type==2">月巡</text>
									<text class="d_content" v-if="item.type==3">年巡</text>
								</view>
								<view class="d_view u-margin-bottom-20">
									<text class="l_title">巡查次数</text>
									<text class="d_content"><text style="color:#0B868E;">{{item.num}}</text>/{{item.total}}</text>
								</view>
								<view class="d_view" v-if="item.num!=0">
									<text class="l_title">最近巡查时间</text>
									<text class="d_content">{{item.time}}</text>
								</view>
							</view>
							<view style="clear: both;height:20rpx;background-color: #F3f5f7;"></view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 底部导航 -->
		<u-tabbar v-model="current" :list="vuextabbar" height="110rpx" activeColor="#0c838b" :mid-button="false"></u-tabbar>
	</view>
</template>

<script>
	import {
		getBanner,
		getNoticeList
	} from "@/service/indexService.js";
	import {
		getPatrolList
	} from "@/service/patrolService.js";
	export default {
		data () {
			return {
				current: 0,
				list:[],
				type:1,
				showEmpty:false,
				messageList:[],
				
				patrollist:[],
				
			}
		},
		mounted() {
			// if(this.$store.state.isLogin==false){
			// 	uni.redirectTo({
			// 		url:'/pages/login/login'
			// 	})
			// }
			getBanner({
				type: 5
			}).then(this.getBanner);
		},
		onShow() {
			getNoticeList({
				type:2
			}).then(this.getNoticeList);
			if(this.$store.state.isLogin){
				getPatrolList({
					status: 99
				}).then(this.getPatrolList);
			}
		},
		computed: {
			vuextabbar() {
				let tabbar = this.$store.state.vuex_tabbar;
				let messageNum = this.$store.state.messageNum;
				tabbar[2].count = messageNum;
				return tabbar;
			}
		},
		methods: {
			getBanner(e) {
				// console.log(e.result);
				if (e.code == 200) {
					// console.log(e);
					this.list=e.result;
				}
			},
			getNoticeList(e) {
				if (e.code == 200) {
					this.messageList = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.messageList = [];
				}
			},
			getPatrolList(e) {
				if (e.code == 200) {
					this.patrollist=e.result
				}else{
					this.patrollist=[]
				}
			},
			scanCode:function(){
				uni.scanCode({
					success(res) {
						let code=res.result;
						uni.navigateTo({
							url:'/pages/patrol/formPatrolDetail?code='+code
						})
					}
				})
			},
			tosearch:function(){
				uni.navigateTo({
					url:'./search'
				})
			},
			tomorenotice:function(){
				uni.navigateTo({
					url:'../index/messageCenter'
				})
			},
			tomorepatrol:function(){
				uni.navigateTo({
					url:'../patrol/patrolList?status=99'
				})
			},
			tomessageCenter:function(){
				uni.navigateTo({
					url:'/pages/index/messageCenter'
				})
			},
			messagedetail:function(id){
				uni.navigateTo({
					url:'/pages/index/noticeDetail?id='+id
				})
			},
			topatrol:function(){
				uni.navigateTo({
					url:'/pages/patrol/index'
				})
			},
			patrolDetail:function(code){
				uni.navigateTo({
					url:'/pages/patrol/patrolDetail?code='+code
				})
			}
		}
	}
</script>

<style lang="scss">
	swiper{
		height:540rpx !important;
	}
	.search_top{
		position: absolute;
		top:150rpx;
		width:90%;
		height:80rpx;
		color:#999;
		border-radius: 40rpx;
		line-height: 80rpx;
		z-index:100;
		background-color: #fff;
	}
	swiper.data-v-699306cb{
		// width:100% !important;
		height:540rpx !important;
	}
	.title_list{
		width:47%;
		color:#666;
		padding:30rpx 0;
		border-radius: 15rpx;
		box-shadow: 0 0 15rpx #ddd;
	}
	.title_list image{
		width:80rpx;
		height:80rpx;
		margin:0 auto;
	}
	.box_shadow{
		border-radius: 15rpx;
		box-shadow: 0 0 15rpx #ddd;
	}
	.dan_title{
		height:70rpx;
		line-height: 65rpx;
		padding:0 20rpx;
		border-bottom: 1rpx solid #ddd;
	}
	.img_ava{
		width:80rpx;
		height:80rpx;
		border-radius: 50%;
	}
	.num_notice{
		font-size: 20rpx;
		color:#fff;
		width:18rpx;
		height:18rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		top:30rpx;
		left:60rpx;
		background-color: red;
	}
	
	.time{
		color:#666;
		font-size: 25rpx;
	}
	.right_con{
		width:95%;
	}
	.message_com{
		color:#666;
		clear: both;
		font-size: 25rpx;
		letter-spacing:3rpx;
		margin-top:10rpx;
		overflow: hidden;
		-webkit-line-clamp:2;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-box-orient: vertical;
	}
	
	.more{
		width:40rpx;
		height:30rpx;
	}
	
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:15rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #18B566;
	}
	.circle1{
		background-color:#ff0000 ;
	}
	.circle2{
		background-color:#ff5500 ;
	}
	.l_title {
		color: #999;
		float: left;
	}
	
	.d_content {
		color: #666;
	}
	
	.d_view {
		font-size: 28rpx;
		color: #999;
		/* margin-top: 30rpx; */
		text-align: right;
	}
	.main-service {
		margin-top: 20upx;
		// border-radius: 10upx;
		background: #ffffff;
		// box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
	}
	
	.main-service .title {
		height:70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
	}
</style>

